<template>
	<view >
		<view class="dynamic-bg">
			<view class="header-nav">
				<text class="nav-name" :class="navIndex==0?'activite':''"
					@click="checkIndex(0)">全部</text>
				<text class="nav-name" style="margin-right: 0;" :class="navIndex==1?'activite':''" @click="checkIndex(1)">关注</text>
				<view class="">
					<view class="u-tab-bar subscript" v-if="navIndex==0"></view>
					<view class="u-tab-bars subscript" v-if="navIndex==1"></view>
				</view>
				
			</view>
			<view class="content-bg">
				<view >
					<view class="strip-flex" v-for="(item,index) in list" :key="index">
						<image class="dynamic_head-portrait" :src="item.avatar" mode=""></image>
						<view class="dynamic-info">
							<view class="dynamic-info-flex">
								<view>
									<text class="dynamic-info-title">{{item.nickname}}</text>
								</view>
								<view class="dynamic-info-follow followed" @click="gz(item.id,0)" v-if="item.isCollect">
									<text class="follow" >已关注</text>
								</view>
								<view class="dynamic-info-follow" v-else @click="gz(item.id,1)">
									<text class="follow" >关注</text>
								</view>
							</view>
							<view class="dynamic-category">
								<view class="dynamic-grade-flex" v-if="item.skiil_id==1">
									<view class="ico-img">
										<image src="../../static/ico/grade1.png" mode=""></image>
									</view>
									<text class="dynamic-grade">普通</text>
								</view>
								<view class="dynamic-grade-flex" v-else-if="item.skiil_id==2">
									<view class="ico-img">
										<image src="../../static/ico/grade2.png" mode=""></image>
									</view>
									<text class="dynamic-grade">金牌</text>
								</view>
								<view class="dynamic-grade-flex" v-else-if="item.skiil_id==3">
									<view class="ico-img">
										<image src="../../static/ico/grade3.png" mode=""></image>
									</view>
									<text class="dynamic-grade">镇店</text>
								</view>
								<view class="dynamic-grade-flex" v-else-if="item.skiil_id==4">
									<view class="ico-img">
										<image src="../../static/ico/grade4.png" mode=""></image>
									</view>
									<text class="dynamic-grade">神级</text>
								</view>
								<view class="dynamic-grade-flex" v-else-if="item.skiil_id==5">
									<view class="ico-img">
										<image src="../../static/ico/grade5.png" mode=""></image>
									</view>
									<text class="dynamic-grade">首席</text>
								</view>
								<view class="dynamic-service">
									<text>连麦</text>
									<text>|</text>
									<text>点歌</text>
									<text>|</text>
									<text>哄睡</text>
									<text>|</text>
									<text>叫醒</text>
									<text>|</text>
									<text>手游</text>

								</view>
							</view>
							<view class="dynamic-introduce">
								<text>{{item.content}}11</text>
							</view>
							<view v-if="item.type==2">
								<video class="video" :src="item.url" controls></video>
							</view>
							<view v-else class="dynamic-img">
								<!-- <image @tap="previewImage(index)" v-for="(item,index) in item.url" :src="item" mode=""></image> -->
								<image @tap="previewImage(index)"  :src="item.url" mode=""></image>
							</view>
							<view class="fabulous" v-if="item.isLike" @click="like(item.id,0)">
								<view class="fabulous-img">
									<image src="../../static/ico/fabulous_fill.png" mode=""></image>
								</view>
								<text class="likes liked">{{item.likeCount}}</text>
							</view>
							<view class="fabulous" v-else @click="like(item.id,1)">
								<view class="fabulous-img">
									<image src="../../static/ico/fabulous.png" mode=""></image>
								</view>
								<text class="likes">{{item.likeCount}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有更多了 -->
				<view class="no-more" v-if="moreList">
					——<text>加载更多</text>——
				</view>
				<view class="no-more" v-else>
					——<text>没有更多了</text>——
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					'../../static/logo.png',
					'../../static/logo.png'
				],
				navIndex: 0,
				list:[],
				page:1,
				isAtt:0,
				moreList:true
			}
		},
		onShow() {
			this.page=1
			this.lists()
		},
		onReachBottom() {
			if(this.moreList){
				this.page = this.page + 1;
				this.lists(this.page)
			}
		},
		methods: {
			//获取动态列表
			lists(e) {
				this.$http.getReq("/api/Dynamic/getList", {
					pageNum: this.page,
					pageSize: '',
					isAtt: this.isAtt
				}).then(res => {
					if(res.data.data.length!=0){
						if(e){
							this.list = this.list.concat(res.data.data);
						}else{
							this.list=res.data.data
						}
					}else{
						this.list=res.data.data
						this.page--
						this.moreList=false
					}
				});
			},
			gz(e,f){
				this.$http.postReq("/api/user/addAtt", {
					employeeId:e,
					act: f
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.lists()
					}
				});
			},
			like(e,f){
				this.$http.postReq("/api/user/addLike", {
					dynamicId:e,
					act: f
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.lists()
					}
				});
			},
			previewImage(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.images //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			checkIndex(index) {
				this.navIndex = index;
				this.isAtt=index
				this.page=1
				this.lists(this.page)
			}
		}
	}
</script>

<style>		
	.dynamic-bg {
		background: linear-gradient(to bottom, #B2CAD9 0%, #BBCEDB 25%, #C6D2DE 50%, #F2E4E7 100%);
		padding-bottom: 20rpx;
		min-height: 1000rpx;
	}
	.header-nav {
		text-align: center;
		padding-top: 30rpx;
		position: relative;
		width: 50%;
		margin: 0 auto;
	}

	.nav-name {
		margin-right: 92rpx;
		font-size: 36rpx;
	}

	

	.activite {
		font-weight: 700;
	}


	.content-bg {
		background: #ffffff;
		border-radius: 15rpx;
		margin: 30rpx;
		/* padding-bottom: 50rpx; */
	}

	.strip-flex {
		display: flex;
		padding: 30rpx 10rpx;
	}

	.u-tab-bar {
		position: absolute;
		bottom: -18rpx;
		left: 81rpx;
	}
	.u-tab-bars{
		position: absolute;
		bottom: -18rpx;
		right: 86rpx;
	}
	.subscript {
		width: 48rpx;
		/* transform: translate(42.8359px, -100%); */
		transition-duration: 0.5s;
		background: linear-gradient(126deg, rgb(255, 0, 178) 0%, rgb(128, 0, 188) 100%);
		height: 8rpx;
		opacity: 1;
		border-radius: 6rpx;
	}
	
	.dynamic_head-portrait {
		width: 92rpx;
		height: 92rpx;
		margin-right: 10rpx;
		border-radius: 50%;

	}

	.dynamic-info {
		width: calc(100% - 92rpx);
	}

	.dynamic-info-flex {
		display: flex;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}

	.dynamic-info-title {
		font-size: 36rpx;
		font-weight: 700;
	}

	.dynamic-info-follow {
		background: #F8526A;
		border-radius: 25rpx;
		/* height: 48rpx; */
	}

	.followed {
		background-color: #ACACAC;
	}

	.followed .follow {
		padding: 5rpx 20rpx;
	}

	.follow {
		padding: 5rpx 30rpx;
		margin: 10rpx 0;
		/* line-height: 48rpx; */
		color: #ffffff;
		font-size: 22rpx;
	}

	.dynamic-category {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
		position: relative;
		z-index: 1;
	}

	.dynamic-grade-flex {
		display: flex;
		align-items: center;
		width: 24%;
		border-radius: 25rpx;
		background-color: #FF9194;

	}

	.ico-img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 6rpx;
	}

	.ico-img image {
		width: 100%;
		height: 100%;
	}

	.dynamic-grade {
		color: #ffffff;
		font-size: 26rpx;
		line-height: 44rpx;
		/* margin-right: 20rpx; */
	}

	.dynamic-service {
		background-color: #F5E6E8;
		padding-right: 16rpx;
		padding-left: 36rpx;
		margin-left: -34rpx;
		border-top-right-radius: 182rpx;
		border-bottom-right-radius: 182rpx;
		position: relative;
		z-index: -1;
	}

	.dynamic-service text {
		color: #FF9194;
		margin-right: 5rpx;
		font-size: 15rpx;
		line-height: 44rpx;
	}

	.dynamic-introduce {
		margin-bottom: 10rpx;
	}

	.dynamic-introduce text {
		font-size: 34rpx;

	}

	.video {
		width: 100%;
		height: 315rpx;
	}

	.uni-video-video {
		object-fit: fill;
	}

	.dynamic-img {
		width: 100%;
	}

	.dynamic-img image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}

	.fabulous {
		/* width: 100%; */
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 20rpx;
		padding-bottom: 30rpx;
	}

	.fabulous-img {
		width: 41rpx;
		height: 41rpx;
		margin-right: 6rpx;
	}

	.fabulous image {
		width: 100%;
		height: 100%;
	}

	.likes {
		font-size: 32rpx;
	}
	.liked{
		color: #FC455D;
	}

	.no-more {
		text-align: center;
		color: #EBEBEB;
	}

	.no-more text {
		font-size: 28rpx;
		color: #606266;
		margin: 0 16rpx;
	}
</style>
